<template>
	<view class="bj1">
		<view class="wrap" style="width: 93%;margin: 0 auto;">
			<!-- 基本信息 -->
			<view id="jcxx">
				<view style="border-radius: 10px;">

					<!-- 资产信息 -->
					<view id="jcxx">
						<view>
							<view class="msg-wrap"
								style="background-color: #ffffff;border-radius:16px 16px 16px 16px ; padding: 24rpx 24rpx 64rpx 24rpx;">
								<view class="form-list-head-msg dis"
									style="display: flex; align-items: center; margin-bottom: 36rpx;">
									<view class="red-line"></view>
									<view class="form-list-head-msg-left">您的资产信息</view>
									<view class="form-list-head-msg-right-desc">（多选，资产信息越全，贷款金额越高）</view>
								</view>

								<view class="msg-wrap-right">
									<view class="job-optionszc">
										<view class="job-optionzc" v-for="(item, index) in jobOptionss" :key="index"
											:class="{ active: form[item.field]==item.key }" @click="handleZichan(item)">
											<view class="job-optionzc-container">
												<view class="job-optionzc-title">{{ item.title }}</view>
												<view v-if="item.desc" class="job-optionzc-desc">{{item.desc}}</view>
											</view>
										</view>
									</view>
								</view>

							</view>
						</view>
					</view>
				</view>
				<view class="gobutton" @click="loginclick">
					<text>提交</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		keepFunds
	} from '@/api/index.js'
	export default {
		data() {
			return {
				jobOptionss: [{
						title: '有房',
						"field": "houseProperty",
						value: 'houseProperty_1',
						key: '1',
					}, {
						title: '有车',
						"field": "carProduction",
						value: 'carProduction_1',
						key: '1',
					}, {
						title: '有社保',
						"field": "socialSecurity",
						value: 'socialSecurity_1',
						key: '1',
					},
					{
						title: '有保单',
						"field": "commercialInsurance",
						value: 'commercialInsurance_1',
						key: '1',
					},
					{
						title: '有信用卡',
						"field": "creditCard",
						value: 'creditCard_1',
						key: '1',
					},
					{
						title: '芝麻分',
						"desc": "600-650",
						"field": "sesamePoints",
						"value": 'sesamePoints_3',
						key: '3',
					},
					{
						title: '芝麻分',
						"desc": "650-700分",
						"field": "sesamePoints",
						"value": 'sesamePoints_4',
						key: '4',
					},
					{
						title: '芝麻分',
						"desc": "700+",
						"field": "sesamePoints",
						"value": 'sesamePoints_5',
						key: '5',
					},


					{
						title: '公积金',
						"field": "accumulationFund",
						desc: '<6个月',
						value: 'accumulationFund_2',
						key: '1',
					}, {
						title: '公积金',
						"field": "accumulationFund",
						desc: '>6个月',
						value: 'accumulationFund_2',
						key: '2',
					}
				],
				formA: {

				},
				form: {
					"houseProperty": "", //房
					"carProduction": "", //车
					"accumulationFund": '', //公积金
					"socialSecurity": '', //社保
					"sesamePoints": "", //芝麻分
					"commercialInsurance": '', //保单
					"creditCard": '', //信用卡
				},
			}
		},
		methods: {
			handleZichan(curItem) {
				console.log(curItem, 'curItem')
				// 如果是芝麻分、公积金一类已选择某个选项，需要互斥
				if (!!this.form[curItem.field] && this.form[curItem.field] !== '0') {
					if (this.form[curItem.field] === curItem.key) {
						this.form[curItem.field] = '0';
					} else {
						this.form[curItem.field] = curItem.key;
					}
				} else {

					this.form[curItem.field] = curItem.key;
				}
			},
			async loginclick() {
				const finalldata = {
					...this.form,
					...this.formA
				};
				try {
					uni.showLoading({
						title: "正在审核，请稍后!",
						mask: true
					});

					const res = await keepFunds(finalldata);
					console.log(res, 'res.data.code');

					if (res.data.code === 0) {
						uni.navigateTo({
							url: '/pagesB/createRating/audit'
						});
					} else if (res.data.code === 1) {
						uni.navigateTo({
							url: '/pagesB/createRating/audited'
						});
					} else {
						uni.showToast({
							title: res.msg || '提交失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.log('异常：', error);
					uni.showToast({
						title: '网络异常，请稍后重试',
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}
			},


		},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('passFormA', (data) => {
				this.formA = data.form; // 保存页面A传来的数据
			});
		},

	}
</script>

<style scoped lang="scss">
	.bj1 {
		background-image: url(@/static/createRate/bj1.png);
		width: 100vw;
		height: 100vh;
		background-size: 100% 100%;
		padding: 48rpx 0;
	}

	.msg-wrap {
		margin-bottom: 50rpx;
	}

	.form-list-head-msg {
		padding: 12rpx 16rpx;

	}

	.red-line {
		width: 12rpx;
		height: 28rpx;
		background: #FF6936;
		margin-left: -40rpx;
		margin-right: 20rpx;
		border-radius: 0rpx;
		margin-top: 8rpx;
	}

	.form-list-head-msg-left {
		width: 270rpx;
		height: 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-right: -40rpx;
	}

	.form-list-head-msg-right-desc {
		width: 500rpx;
		height: 34rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #FB6C28;
		text-align: left;
		font-style: normal;
		text-transform: none;

	}

	.msg-wrap-right {
		text-align: left;
		flex: 1;
		margin-top: 20rpx;

		input {
			font-size: 28rpx;
			text-align: right;
		}

		.msg-wrap-right-text {
			.msg-wrap-right-text-jt {
				margin-left: 20rpx;
			}

			font-size: 44rpx;
			color: #3C75F2;
			font-weight: 500;
		}
	}

	.job-optionszc {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 46rpx;
	}

	.job-optionzc {
		height: 88rpx;
		text-align: center;
		background-color: #F0F4FF;
		color: #333;
		border-radius: 12rpx;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.job-optionzc-container {
			.job-optionzc-desc {
				font-size: 20rpx;
				margin-top: 6rpx;
			}
		}
	}

	.job-optionzc.active {
		background-color: #3b82f6;
		color: #fff;
	}

	.gobutton {
		background: #3C75F2;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		box-shadow: 0px 4px 15px 2px #B2CBEA;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-left: 40rpx;
		margin-right: 40rpx;
		height: 90rpx;
		color: #ffffff;
		font-size: 40rpx;
		text-align: center;
		border-radius: 45rpx;
	}
</style>